<script lang="ts" setup>
// eslint-disable-next-line ts/ban-ts-comment
// @ts-ignore
import { Pane, Splitpanes } from 'splitpanes'
// eslint-disable-next-line ts/ban-ts-comment
// @ts-ignore
import VueResizable from 'vue-resizable'

import { ArrowDown, ArrowRight, CirclePlus, Search } from '@element-plus/icons-vue'
import { methodBgClass } from '~/utils/config'
import WorkspaceTableQueryParam from './table/queryParam.vue'
import WorkspaceTableBodyParam from './table/bodyParam.vue'

onMounted(() => {})

const setting = ref({
  method: 'GET',
  url: 'http://127.0.0.1/api/ping',
  type: '1',
  json: '',
  authType: 'Bearer',
  authText: '',
})

function handleAtuh(type: string) {
  setting.value.authType = type
}

const tabList = [
  { key: 'param', name: '参数' },
  { key: 'body', name: '请求体' },
  { key: 'header', name: '请求头' },
  { key: 'auth', name: '授权' },
]
const activeTab = ref(tabList[0])
function handleTab(item: any) {
  activeTab.value = item
}

const query = ref({
  sortby: 'itime',
  sorttype: 'desc',
  keyword: '',
})

const historyList = ref(
  [
    {
      isShow: true,
      date: '3月20日',
      list: [
        {
          id: 1001,
          title: 'ping',
          time: '03-20 16:44',
        },
        {
          id: 1002,
          title: 'pong',
          time: '03-20 20:07',
        },
      ],
    },
    {
      isShow: false,
      date: '4月20日',
      list: [
        {
          id: 1003,
          title: 'ping',
          time: '04-20 16:44',
        },
        {
          id: 1004,
          title: 'pong',
          time: '04-20 20:07',
        },
      ],
    },
  ],
)

function handleShow(row: any) {
  row.isShow = !row.isShow
}

const activeItem: any = ref({})

function handleClick(row: any) {
  activeItem.value = row
}

const resultTabList = [
  { key: 'body', name: 'Body' },
  { key: 'cookie', name: 'Cookies' },
  { key: 'header', name: 'Headers' },
  { key: 'test', name: 'Test Results' },
]
const resultTab = ref(resultTabList[0])
function handleResultTab(item: any) {
  resultTab.value = item
}
const resultFormatList = [
  { key: 'pretty', name: 'Pretty' },
  { key: 'raw', name: 'Raw' },
  { key: 'preview', name: 'Preview' },
  { key: 'visualize', name: 'Visualize' },
]
const formatItem = ref(resultFormatList[0])
function handleResultFormat(item: any) {
  formatItem.value = item
}

const formatType = ref('Text')
function handleChange(type: string) {
  formatType.value = type.replace(/^[a-z]/, letter => letter.toUpperCase())
}

// const methodList = [
//   { label: 'GET', value: 'GET' },
//   { label: 'POST', value: 'POST' },
//   { label: 'PUT', value: 'PUT' },
//   { label: 'DELETE', value: 'DELETE' },
// ]

const record: any = ref(
  {
    response: '',
  },
)

// query参数
const queryRef = ref()
const queryList: any = ref([])

function handleAddQuery() {
  queryRef.value.handleAdd()
}

function handleQueryChange(list: any) {
  queryList.value = list
}

// body参数
const bodyRef = ref()
const bodyList: any = ref([])

function handleAddBody() {
  bodyRef.value.handleAdd()
}

function handleBodyChange(list: any) {
  queryList.value = list
}

// header参数
const headerRef = ref()
const headerList: any = ref([])

function handleAddHeader() {
  headerRef.value.handleAdd()
}

function handleHeaderChange(list: any) {
  headerList.value = list
}

function handleDownload() {}
</script>

<template>
  <main class="mix-splitter h-full w-full">
    <header class="mb-2.5 flex items-center px-1">
      <div class="h-8 flex flex-1 items-center border-1 border-[#e1e1e1] rounded bg-[#f8f8f8] px-3">
        <span
          class="mr-2 h-5 flex items-center rounded px-1"
          :class="setting.method ? methodBgClass[setting.method.toLowerCase()] : ''"
        >
          {{ setting.method }}
        </span>
        <span class="text-xs color-[#171b1f]">{{ setting.url }}</span>
      </div>
      <div class="ml-2 flex items-center">
        <el-button-group class="min-w-21 w-21">
          <el-button type="primary">
            发送
          </el-button>

          <el-dropdown>
            <el-button type="primary" :icon="ArrowDown" style="padding: 8px 4px;" />
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleDownload">
                  发送并下载
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-button-group>
      </div>
    </header>
    <section class="flex overflow-auto px-1" style="height: calc(100% - 40px);">
      <Splitpanes class="default-theme" style="height: 100%; width: 100%;">
        <Pane size="20" style="background-color: white;">
          <aside class="min-w-50 w-full flex flex-col">
            <!--
            <header class="my-2 flex items-center pr-1 font-bold">
              历史记录
            </header>
            -->
            <nav class="mb-2.5 flex pr-1">
              <el-select v-model="query.sortby" style="margin-right: 6px;">
                <el-option label="按添加时间" value="itime" />
              </el-select>
              <el-input v-model="query.keyword" placeholder="搜索关键字" :prefix-icon="Search" />
            </nav>
            <main class="flex-1 overflow-auto pr-1">
              <section v-for="(item, index) in historyList" :key="index">
                <header class="mb-2.5 flex cursor-pointer items-center text-xs color-[#666666]" @click="handleShow(item)">
                  <span class="mr-1 flex items-center">
                    <el-icon v-if="item.isShow"><ArrowDown /></el-icon>
                    <el-icon v-else><ArrowRight /></el-icon>
                  </span>
                  <span>{{ item.date }}</span>
                </header>
                <section v-if="item.isShow">
                  <div
                    v-for="(ele, idx) in item.list"
                    :key="idx"
                    class="item-box flex"
                    :class="{ 'item-active': ele.id === activeItem.id }"
                    @click="handleClick(ele)"
                  >
                    <div class="item-icon" />
                    <div class="text-xs leading-5">
                      <div class="text-ellipsis-1 mb-1 color-[#666666]" :title="ele.title">
                        {{ ele.title }}
                      </div>
                      <div class="color-[#979797]">
                        {{ ele.time }}
                      </div>
                    </div>
                  </div>
                </section>
              </section>
            </main>
          </aside>
        </Pane>
        <Pane size="80" min-size="50" style="background-color: white;">
          <section class="h-full min-w-200 w-full overflow-auto px-1">
            <!--
          <header class="my-2 h-6 flex items-center text-sm color-[#30353e] font-bold">
            <span>http://127.0.0.1/api/ping</span>
          </header>
          <section class="my-2 flex">
            <el-input v-model="setting.url" placeholder="">
              <template #prepend>
                <el-select v-model="setting.method" style="width: 120px">
                  <el-option v-for="item in methodList" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </template>
            </el-input>
            <el-button-group class="ml-3 min-w-21 w-21">
              <el-button type="primary">
                发送
              </el-button>
              <el-dropdown>
                <el-button type="primary" :icon="ArrowDown" style="padding: 8px 4px;" />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleDownload">
                      发送并下载
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-button-group>
          </section>
          -->

            <VueResizable :active="['b']" :height="320" :min-height="32">
              <section class="h-full overflow-hidden text-sm">
                <nav class="mb-2 h-8 w-57 flex items-center rounded bg-[#f6f6f6] px-2 text-sm">
                  <template v-for="(item, index) in tabList" :key="index">
                    <div
                      class="header-item flex cursor-pointer items-center px-1.5 color-[#6e737b]"
                      :class="{ active: activeTab.key === item.key }"
                      @click="handleTab(item)"
                    >
                      <span>{{ item.name }}</span>
                    </div>
                  </template>
                </nav>
                <template v-if="activeTab.key === 'param'">
                  <header class="mb-2 h-7 flex items-center justify-between">
                    <div class="flex items-center color-[#171b1f]">
                      <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                      <span>查询参数</span>
                    </div>
                    <div>
                      <el-button link @click="handleAddQuery">
                        <el-tooltip effect="dark" content="添加" placement="top">
                          <el-icon size="18">
                            <CirclePlus />
                          </el-icon>
                        </el-tooltip>
                      </el-button>
                    </div>
                  </header>
                  <section class="w-full" style="height: calc(100% - 92px)">
                    <WorkspaceTableQueryParam ref="queryRef" :list="queryList" @change="(val:any) => handleQueryChange(val)" />
                  </section>
                </template>
                <template v-else-if="activeTab.key === 'body'">
                  <header class="mb-2 h-7 flex items-center justify-between">
                    <div class="flex items-center">
                      <div class="mr-6 flex items-center color-[#171b1f]">
                        <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                        <span>内容类型</span>
                      </div>
                      <el-radio-group v-model="setting.type">
                        <el-radio value="1">
                          form-data
                        </el-radio>
                        <el-radio value="2">
                          x-www-form-urlencoded
                        </el-radio>
                        <el-radio value="3">
                          json
                        </el-radio>
                      </el-radio-group>
                    </div>

                    <div>
                      <el-button v-if="setting.type !== '3'" link @click="handleAddBody">
                        <el-tooltip effect="dark" content="添加" placement="top">
                          <el-icon size="18">
                            <CirclePlus />
                          </el-icon>
                        </el-tooltip>
                      </el-button>
                    </div>
                  </header>
                  <section v-if="setting.type === '1'" class="w-full" style="height: calc(100% - 92px)">
                    <WorkspaceTableBodyParam ref="bodyRef" :is-file="true" :list="bodyList" @change="(val:any) => handleBodyChange(val)" />
                  </section>
                  <section v-else-if="setting.type === '2'" class="w-full" style="height: calc(100% - 92px)">
                    <WorkspaceTableBodyParam ref="bodyRef" :is-file="false" :list="bodyList" @change="(val:any) => handleBodyChange(val)" />
                  </section>
                  <section v-else class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 92px)">
                    <JsonEditor v-model="setting.json" language="json" />
                  </section>
                </template>
                <template v-if="activeTab.key === 'header'">
                  <header class="mb-2 h-7 flex items-center justify-between">
                    <div class="flex items-center color-[#171b1f]">
                      <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                      <span>请求头列表</span>
                    </div>
                    <div>
                      <el-button link @click="handleAddHeader">
                        <el-tooltip effect="dark" content="添加" placement="top">
                          <el-icon size="18">
                            <CirclePlus />
                          </el-icon>
                        </el-tooltip>
                      </el-button>
                    </div>
                  </header>
                  <section class="w-full" style="height: calc(100% - 92px)">
                    <WorkspaceTableQueryParam ref="headerRef" :list="headerList" @change="(val:any) => handleHeaderChange(val)" />
                  </section>
                </template>
                <template v-if="activeTab.key === 'auth'">
                  <header class="mb-2 h-7 flex items-center justify-between">
                    <div class="flex items-center">
                      <div class="mr-6 flex items-center color-[#171b1f]">
                        <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                        <span>授权类型</span>
                      </div>
                      <el-dropdown>
                        <div class="flex items-center">
                          {{ setting.authType }}
                          <el-icon class="el-icon--right">
                            <ArrowDown />
                          </el-icon>
                        </div>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item @click="handleAtuh('None')">
                              None
                            </el-dropdown-item>
                            <el-dropdown-item @click="handleAtuh('Bearer')">
                              Bearer
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                  </header>
                  <section v-if="setting.authType === 'Bearer'" style="height: calc(100% - 92px)" class="w-full">
                    <el-input
                      v-model="setting.authText"
                      style="width: 100%;height: 100%;"
                      type="textarea"
                      placeholder=""
                    />
                  </section>
                  <section v-else style="height: calc(100% - 92px)" class="w-full border-0 border-[#e1e1e1] p-1" />
                </template>
              </section>
            </VueResizable>
            <VueResizable :active="['b']" :height="320" :min-height="32">
              <section class="mt-2 h-full overflow-hidden text-sm">
                <header class="mb-2 h-7 flex items-center justify-between">
                  <div class="flex items-center color-[#171b1f]">
                    <span class="mr-2 h-4 w-0.73 bg-[#216ef2]" />
                    <span>返回响应</span>
                  </div>
                </header>
                <nav class="mb-3 h-9 flex items-center text-sm">
                  <template v-for="(item, index) in resultTabList" :key="index">
                    <div
                      class="relative mr-1 w-20 flex cursor-pointer items-center justify-center color-[#6e737b] hover:color-[#216ef2]"
                      :class="{ 'tab-active': resultTab.key === item.key }"
                      @click="handleResultTab(item)"
                    >
                      <span>{{ item.name }}</span>
                    </div>
                  </template>
                </nav>
                <section class="mb-3 flex items-center justify-between">
                  <div class="flex items-center text-xs color-[#666666]">
                    <div class="mr-2.5 h-8 flex items-center rounded-md bg-[#f8f8f8] px-4">
                      <div
                        v-for="(item, index) in resultFormatList"
                        :key="index"
                        class="mr-4 flex cursor-pointer items-center"
                        @click="handleResultFormat(item)"
                      >
                        <span class="mr-1 h-1.5 w-1.5 rounded-[50%]" :style="{ 'background-color': formatItem.key === item.key ? '#21b65c' : '#bec3c9' }" />
                        <span>{{ item.name }}</span>
                      </div>
                    </div>
                    <div class="h-8 flex items-center rounded-md bg-[#f8f8f8] px-3">
                      <span class="w-7">{{ formatType }}</span>
                      <span class="flex cursor-pointer items-center">
                        <el-dropdown>
                          <el-icon class="el-icon--right">
                            <el-icon><ArrowDown /></el-icon>
                          </el-icon>
                          <template #dropdown>
                            <el-dropdown-menu>
                              <el-dropdown-item @click="handleChange('text')">Text</el-dropdown-item>
                              <el-dropdown-item @click="handleChange('json')">Json</el-dropdown-item>
                            </el-dropdown-menu>
                          </template>
                        </el-dropdown>
                      </span>
                    </div>
                  </div>
                  <div class="flex items-center">
                    <div class="mr-4 text-xs">
                      <span class="color-[#666666]">状态</span>
                      <span class="color-[#999999]">：</span>
                      <span class="color-[#21b65c]">404</span>
                    </div>
                    <div class="mr-4 text-xs">
                      <span class="color-[#666666]">时间</span>
                      <span class="color-[#999999]">：</span>
                      <span class="color-[#21b65c]">30ms</span>
                    </div>
                    <div class="mr-4 text-xs">
                      <span class="color-[#666666]">大小</span>
                      <span class="color-[#999999]">：</span>
                      <span class="color-[#21b65c]">315B</span>
                    </div>
                  </div>
                </section>
                <section class="w-full border-1 border-[#e1e1e1] p-1" style="height: calc(100% - 136px)">
                  <JsonEditor v-model="record.response" language="json" />
                </section>
              </section>
            </VueResizable>
          </section>
        </Pane>
      </Splitpanes>
    </section>
  </main>
</template>

<style lang="scss" scoped>
@use '~/assets/splitpanes.scss';
@use '~/assets/custom.scss';
</style>

<style lang="scss" scoped>
.item-box {
  border: 1px solid;
  border-color: #e1e1e1;
  border-radius: 6px;
  padding: 8px;
  cursor: pointer;
  margin-bottom: 10px;
}

.item-active {
  background: #f8faff;
  border-color: #216ef2;
}

.item-icon {
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  background: #21b65c;
  border-radius: 50%;
  margin-right: 8px;
  margin-top: 6px;
}
</style>
